<template>
  <div>
    <web-header />
    <div class="daohang_a">
      <router-link to="/">首页</router-link> &gt;
      <router-link to="/visa">签证中心</router-link>
    </div>
    <div class="main" id="app">
      <!-- 签证国家列表 -->
      <div class="main-left">
        <div class="left-nav">
          <div class="nav-menu" style="background-color: #0db770;" id="nav-menu">
            <ul>
              <li class="off">签证国家</li>
            </ul>
          </div>

          <div class="menu-div">
            <div id="con_one_1">
              <dl>
                <dt>
                  <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/PKDEcu.jpg" width="20"
                    height="20" /><a href="javascript:void(0)">亚洲签证</a>
                </dt>
                <dd>
                  <router-link v-for="rs in country['亚洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                    {{ rs.title }}
                  </router-link>

                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/AEsBgM.jpg" width="20"
                    height="20" /><a href="javascript:void(0)">欧洲签证</a>
                </dt>
                <dd>
                  <router-link v-for="rs in country['欧洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                    {{ rs.title }}
                  </router-link>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/kmnFUG.jpg" width="20"
                    height="20" /><a href="javascript:void(0)">美洲签证</a>
                </dt>
                <dd>
                  <router-link v-for="rs in country['美洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                    {{ rs.title }}
                  </router-link>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/fRzmRP.jpg" width="20"
                    height="20" /><a href="javascript:void(0)">澳洲签证</a>
                </dt>
                <dd>
                  <router-link v-for="rs in country['澳洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                    {{ rs.title }}
                  </router-link>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/gq7SWx.jpg" width="20"
                    height="20" /><a href="javascript:void(0)">非洲签证</a>
                </dt>
                <dd>
                  <router-link v-for="rs in country['中东非']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                    {{ rs.title }}
                  </router-link>
                </dd>
              </dl>
            </div>
          </div>
        </div>


      </div>

      <div class="main-right" id="box">
        <div class="screen">
          <div class="top">
            <ul id="typeArr">
              <li><a href="javascript:void(0)" @click="changeList('type', '')"
                  :class="data.type == '' ? 'active' : ''">全部</a>
              </li>
              <li v-for="rs in destination.type" :key="rs.id">
                <a @click="changeList('type', rs.id)" :class="data.type == rs.id ? 'active' : ''"
                  href="javascript:void(0)">{{
                    rs.title }}</a>
              </li>
              <!-- <li><a href="javascript:void(0)" name="123">商务签证</a></li>
              <li><a href="javascript:void(0)" name="124">探亲访友签</a></li>
              <li><a href="javascript:void(0)" name="125">留学签证</a></li> -->
            </ul>
          </div>
          <div class="bottom">
            <dl>
              <dt>所在地：</dt>
              <dd id="areaArr">
                <a @click="changeList('area', '')" :class="data.area == '' ? 'active' : ''" href="javascript:void(0)">全部
                </a>
                <a v-for="rs in destination.area" :key="rs.id" @click="changeList('area', rs.id)"
                  :class="data.area == rs.id ? 'active' : ''" href="javascript:void(0)">{{ rs.title }} </a>
              </dd>
            </dl>
            <!-- <dl>
              <dt>入境次数：</dt>
              <dd id="numsArr">
                <a @click="changeList('nums', '')" :class="data.nums == '' ? 'active' : ''" href="javascript:void(0)">全部
                </a>
                <a v-for="rs in destination.nums" :key="rs.id" @click="changeList('nums', rs.id)"
                  :class="data.nums == rs.id ? 'active' : ''" href="javascript:void(0)">{{ rs.title }} </a>
              </dd>
            </dl> -->
          </div>
        </div>

        <!-- 列表 -->
        <div class="list">
          <div v-for="rs in list" :key="rs.id" class="list_item">
            <div>
              <div class="title">
                <!-- <span style="background-color: #009af7" class="tip">旅游签</span> -->
                <!-- <span style="background-color: #fa7e03" class="tip">商务签</span>
                  <span style="background-color: #0db770" class="tip">探亲签</span>
                  <span style="background-color: #cf01f8" class="tip">留学签</span> -->
                <span v-for="(labers, index0) in rs.visa_type" :key="index0" class='tip'
                  :style="{ backgroundColor: color(labers.title) }">
                  {{ labers.title }}
                </span>

                <router-link :to="`/visa/details/${rs.id}`">{{ rs.title }}</router-link>

              </div>
              <div class="msgs">
                <span>入境次数：{{ rs.visa2Pro ? rs.visa2Pro.visa_nums === '1次' ? "单次" : rs.visa2Pro.visa_nums : '' }}</span>
                <span>有效期：{{ rs.visa2Pro.expiry }}</span>
                <span v-if="rs.visa2Pro">办理时长：{{ rs.visa2Pro.need_days + rs.visa2Pro.op_days }}&nbsp;工作日</span>
                <span v-else>办理时长：{{ data.visa2Pro.need_days + data.visa2Pro.op_days }}-{{
                  data.visa2Pro.need_days_longest + data.visa2Pro.op_days }}&nbsp;工作日</span>
                <span>有效日期：{{ rs.visa2Pro.expiry }}</span>
              </div>
            </div>
            <div class="price">
              <div class="price_num">￥{{ rs.price }}</div>
              <div class="ToDetails">
                <router-link :to="`/visa/details/${rs.id}`">查看详情</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <web-footer />
    <back-top />
  </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { visa_country, visa_items, visa_types, visa_nums, visa_areas } from "@/api/travel";
import { useRoute } from "vue-router";

const route = useRoute();

// 当前路径
let fullPath = route.fullPath;

// 国家列表
let country = ref({ '亚洲': [], '欧洲': [], '中东非': [], '美洲': [], '澳洲': [] });


let getCountry = async () => {
  let data = localStorage.getItem('country');
  if (data.length) {
    country.value = JSON.parse(data);
  } else {
    country.value["亚洲"] = (await visa_country(49)).data.reverse();
    country.value["欧洲"] = (await visa_country(2)).data.reverse();
    country.value["中东非"] = (await visa_country(51)).data.reverse();
    country.value["美洲"] = (await visa_country(7)).data.reverse();
    country.value["澳洲"] = (await visa_country(50)).data.reverse();
    localStorage.setItem('country', JSON.stringify(country.value));
  }
}

let data = ref({
  country: Number(route.params.country),
  type: '', // 签证类型
  nums: '', // 入境次数
  area: '', // 常驻地id
  page: 1,
  limit: 100,
});
let list = ref([]);

let destination = ref({}); // 所有信息


// 初始化 
const initialize = async () => {
  fullPath = route.fullPath; // 保存当前路径
  // 初始化数据
  data.value = {
    country: Number(route.params.country),
    type: '', // 签证类型
    nums: '', // 入境次数
    area: '', // 常驻地id
    page: 1,
    limit: 50,
  };
  list.value = [];

  // 获取列表
  let type = (await visa_types({ country: data.value.country, area: data.value.area })).data; // 签证类型
  // let nums = (await visa_nums({ country: data.value.country, area: data.value.area })).data; // 入境次数
  let area = (await visa_areas({})).data; // 签证常驻地

  destination.value = {
    type,
    area,
    // nums,
  }
  console.log(destination.value)
  // 初始化列表-
  await anewList();
  let title = list.value[0] ? list.value[0].country.title : '';

  document.title = `${title}签证_${title}旅游签证_${title}商务签证 ${title}留学签证 旅行社签证官网`;


}




// 改变data.value时切换列表
const anewList = async () => {
  let res = await visa_items(data.value);
  destination.value.type = (await visa_types({ country: data.value.country, area: data.value.area })).data; // 签证类型


  // console.log(res)
  list.value = [...res.data];
}

// data值改变
const changeList = (key, value) => {
  switch (key) {
    case 'type':
      data.value.type = value;
      break;
    case 'nums':
      data.value.nums = value;
      break;
    case 'area':
      data.value.area = value;
      break;
    default:
      break;
  }
  data.value.page = 1;
  anewList();
}

const color = (key) => {
  switch (key) {
    case '旅游签':
      return '#68a4e8';
    case '探亲访友签':
      return '#0db770';
    case '商务签':
      return '#fa7e03';
    case '留学签':
      return '#cf01f8';
    default:
  }
}


onMounted(async () => {
  await initialize()
  await getCountry();

})



</script>

<style lang="scss" scoped>
@import "../../css/main_visa_list3.css";
</style>